﻿<html>
<head>
<meta charset="utf-8" />
<title>indexedDB使用实例</title>
<link rel="stylesheet" href="indexeddb.css" />
</head>
<body>
<!--创建一个便签容器-->
<div class="notes">
	<!--添加按钮-->
	<div class="add">
		<p class="ic_add">+</p>
		<p>添加便签</p>
	</div>
</div>
<!--为了简化代码，基于jQuery开发-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--自己封装的操作indexedDB的帮助类-->
<script src="indexeddb.js"></script>
<script>
	// 预先定义每一个便签的HTML代码
	var divstr = '<div class="note"><a class="close">X</a><textarea></textarea></div>';
	// 实例化一个便签数据库、数据表
	var db = new LocalDB('db1', 'notes');
	// 打开数据库
	db.open(function(){
		// 页面初始化时，获取所有已有便签
		db.getAll(function(data){
			var div = $(divstr);
			div.data('id', data.id);
			div.find('textarea').val(data.content);
			// 将便签插入到添加按钮前边
			div.insertBefore(add);
		});
	});
	// 为添加按钮注册点击事件
	var add = $('.add').on('click', function(){
		var div = $(divstr);
		div.insertBefore(add);
		// 添加一条空数据到数据库
		db.set({content:''}, function(id){
			// 将数据库生成的自增id赋值到便签上
			div.data('id', id);
		});
	});
	// 监听所有便签编辑域的焦点事件
	$('.notes').on('blur', 'textarea', function(){
		var div = $(this).parent();
		// 获取该便签的id和内容
		var data = { id: div.data('id'), content: $(this).val() };
		// 写入数据库
		db.set(data);
	})
	// 监听所有关闭按钮的点击事件
	.on('click', '.close', function(){
		if(confirm('确定删除此便签吗？')){
			var div = $(this).parent();
			// 删除这条便签数据
			db.remove(div.data('id'));
			// 删除便签DOM元素
			div.remove();
		}
	});
</script>
</body>
</html>